<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>新用户注册 - 协同会议平台</title>
	<!-- 引入Element UI的CSS -->
	<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
	<!--本地CSS-->
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/element.css">
	<style>
		body {
			background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%); /* 渐变色 */
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			margin: 0;
			color: #fff; /* 设置文本颜色为白色以匹配渐变背景 */
		}
		.register-container {
			width: 400px;
			background-color: rgba(255, 255, 255, 0.9);
			padding: 20px;
			border-radius: 8px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}
		.register-title {
			text-align: center;
			margin-bottom: 20px;
		}
		.register-title h3 {
			font-size: 24px;
			font-weight: bold;
			color: #000;
		}
		.register-title p {
			color: #555;
		}
	</style>
</head>
<body>
<div class="register-container" id="app">
	<div class="register-title">
		<h3>新用户注册</h3>
		<p>请输入您的信息:</p>
	</div>
	<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="0px" class="demo-ruleForm">
		<el-form-item prop="email">
			<el-input v-model="registerForm.email" placeholder="邮箱" prefix-icon="el-icon-message"></el-input>
		</el-form-item>
		<el-form-item prop="username">
			<el-input v-model="registerForm.username" placeholder="用户名" prefix-icon="el-icon-user"></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" v-model="registerForm.password" placeholder="密码" prefix-icon="el-icon-lock"></el-input>
		</el-form-item>
		<el-form-item prop="confirmPassword">
			<el-input type="password" v-model="registerForm.confirmPassword" placeholder="确认密码" prefix-icon="el-icon-lock"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="sendEmail">发送邮箱</el-button>
		</el-form-item>
		<el-form-item>
			<el-button type="success" style="width:100%;" @click="submitForm('registerForm')">注册</el-button>
		</el-form-item>
		<el-form-item>
			<el-row>
				<el-col :span="12">
					<el-link href="index.html" type="primary">返回登录</el-link>
				</el-col>
			</el-row>
		</el-form-item>
	</el-form>

	<!-- Element UI Dialog -->
	<el-dialog title="发送邮箱" :visible.sync="dialogVisible" width="30%">
		<span>{{ emailStatus }}</span>
		<span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
	</el-dialog>
</div>

<!-- 引入Vue.js 和 Element UI的JS -->
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.registerForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				registerForm: {
					email: '',
					username: '',
					password: '',
					confirmPassword: ''
				},
				rules: {
					email: [
						{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
						{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
					],
					username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
					password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
					confirmPassword: [{ validator: validatePass, trigger: 'blur' }]
				},
				dialogVisible: false,
				emailStatus: ''
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// 注册逻辑
						alert('提交成功!');
						window.location.href = "home.html";
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			sendEmail() {
				if (this.registerForm.email) {
					this.dialogVisible = true;
					this.emailStatus = '正在发送激活邮件到 ' + this.registerForm.email;
					// 模拟发送邮件的异步过程
					setTimeout(() => {
						this.emailStatus = '激活邮件已发送，请检查您的邮箱';
					}, 2000);
				} else {
					this.$message.error('请输入邮箱地址');
				}
			}
		}
	});
</script>
</body>
</html>